<div class="options-menu-window" [style.display]="isActive? 'block' : 'none' ">
    <div class="main">
        <div class="section" [class.active]="openGeneral">
            <div class="header" (click)="openGeneral = !openGeneral">
                <span class="title">General</span>
                <span class="icon" *ngIf="openGeneral; else closed">
                    <i class="fas fa-caret-up"></i>
                </span>
                <ng-template #closed>
                    <span class="icon">
                        <i class="fas fa-caret-down"></i>
                    </span>
                </ng-template>
            </div>
            <div class="content" *ngIf="isActive && selectionService.currentSelections.length == 1">
                <div *ngIf="!isSelectionTextField(); else textFieldTitle">
                    <span class="property-name">Title:</span>
                    <input type="text" spellcheck="false" [(ngModel)]="selectionService.currentSelections[0].getLogicComponent().options.title">
                </div>
                <ng-template #textFieldTitle>
                    <div *ngIf="isSelectionTextField()">
                        <div>
                            <span class="property-name">Content:</span>
                            <textarea maxlength="250" type="text" spellcheck="false" [(ngModel)]="selectionService.currentSelections[0].getLogicComponent().options.title"></textarea>
                        </div>
                    </div>
                </ng-template>
                <div class="small">
                    <span class="property-name">X:</span>
                    <input #x (input)="updatePosition(x.value, y.value)" step="10" type="number" min="0" max="1960" [(ngModel)]="selectionService.currentSelections[0].getLogicComponent().options.X">
                </div>
                <div class="small">
                    <span class="property-name">Y:</span>
                    <input #y (input)="updatePosition(x.value, y.value)" step="10" type="number" min="0" max="960" [(ngModel)]="selectionService.currentSelections[0].getLogicComponent().options.Y">
                </div>
                <div *ngIf="!isSelectionTextField()">
                    <span class="property-name">Technology:</span>
                    <mat-form-field appearance="fill" class="action-endpoint">
                        <mat-select (selectionChange)="handleTechChange()" [(ngModel)]="selectionService.currentSelections[0].getLogicComponent().options.technology">
                            <mat-option [value]="0">None</mat-option>
                            <mat-option *ngFor="let type of sortedTechnologies" [value]="type">{{Technology[type]}}</mat-option>
                        </mat-select>
                    </mat-form-field>
                </div>
            </div>
            <div class="content" *ngIf="isActive && selectionService.currentSelections.length > 1">
                <div>
                    <span class="property-name">Title:</span>
                    <input type="text" spellcheck="false" (input)="updateTitles()" [(ngModel)]="multipleSelectionsTitle">
                </div>
                <div class="small">
                    <span class="property-name">X:</span>
                    <input #x (input)="updatePosition(multipleSelectionsX, multipleSelectionsY)" step="10" type="number" min="0" max="1960" [(ngModel)]="multipleSelectionsX">
                </div>
                <div class="small">
                    <span class="property-name">Y:</span>
                    <input #y (input)="updatePosition(multipleSelectionsX, multipleSelectionsY)" step="10" type="number" min="0" max="960" [(ngModel)]="multipleSelectionsY">
                </div>
                <div *ngIf="!isSelectionTextField()">
                    <span class="property-name">Technology:</span>
                    <mat-form-field appearance="fill" class="action-endpoint">
                        <mat-select [(ngModel)]="multipleSelectionsTechnology" (selectionChange)="updateTechs()">
                            <mat-option [value]="0">None</mat-option>
                            <mat-option *ngFor="let type of sortedTechnologies" [value]="type">{{Technology[type]}}</mat-option>
                        </mat-select>
                    </mat-form-field>
                </div>
            </div>
        </div>
        <div class="section" [style.display]="selectionService.currentSelections.length == 1 ? 'block' : 'none'" [class.active]="openProps">
            <div class="header" (click)="openProps = !openProps">
                <span class="title">Properties</span>
                <span class="icon" *ngIf="openProps; else closed">
                    <i class="fas fa-caret-up"></i>
                </span>
                <ng-template #closed>
                    <span class="icon">
                        <i class="fas fa-caret-down"></i>
                    </span>
                </ng-template>
            </div>
            <div class="content">
                <div #optionsWrapper >
            
                </div>
            </div>
        </div>
        <div class="section" [class.active]="openActions" [style.display]="!hasActions || selectionService.currentSelections.length > 1 ? 'none' : 'block'">
            <div class="header" (click)="openActions = !openActions">
                <span class="title">Actions</span>
                <span class="icon" *ngIf="openActions; else closed">
                    <i class="fas fa-caret-up"></i>
                </span>
                <ng-template #closed>
                    <span class="icon">
                        <i class="fas fa-caret-down"></i>
                    </span>
                </ng-template>
            </div>
            <div class="content">
                <div #actionsWrapper >
                    
                </div>
            </div>
        </div>
        <div class="section" [class.active]="openSimulations" [style.display]="!hasSimulations || selectionService.currentSelections.length > 1 ? 'none' : 'block'">
            <div class="header" (click)="openSimulations = !openSimulations">
                <span class="title">Simulation</span>
                <span class="icon" *ngIf="openSimulations; else closed">
                    <i class="fas fa-caret-up"></i>
                </span>
                <ng-template #closed>
                    <span class="icon">
                        <i class="fas fa-caret-down"></i>
                    </span>
                </ng-template>
            </div>
            <div class="content">
                <div #simulationsWrapper >
                    
                </div>
            </div>
        </div>
    </div>
</div>

